<template>
  <div id="dataStatistics">
       <div id="mainStatic">
         <div>
           <p>100%</p>
           <p>出勤率</p>
         </div>
       </div>
       <span>省级河流 <span>({{data[6].num}}条)</span></span>
       <span>市级河流 <span>({{data[3].num}}条)</span></span>
       <span>镇级河流 <span>({{data[1].num}}条)</span></span>
       <span>村级河流 <span>({{data[2].num}}条)</span></span>
       <span>河长履职 <span>({{data[4].num}}件)</span></span>
       <span>公众反馈 <span>({{data[5].num}}件)</span></span>
  </div>
</template>

<script>
import axios from 'axios'
//import echarts from 'echarts' //引入echarts
export default {
  name: 'dataStatistics',
  data () {
    return {
      data:[{num:0},{num:0},{num:0},{num:0},{num:0},{num:0}]
    }
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=getCount")
      .then(function(res){
        var data = res.data.content;
        that.data = data;
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #dataStatistics{
        width:100%;
        height:29.5vh;
        background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/static.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position:relative;
    }
    #dataStatistics #mainStatic{
      width:10.4vw;
      height:18.5vh;
      margin:0 auto;
      margin-top:5.5vh;
      display:flex;
      flex-direction: column;
      justify-content: center;
      background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/yuan.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #dataStatistics #mainStatic div{
      text-align:center;
      color:#FFF;
      font-size:0.2rem;

    }
    #dataStatistics>span{
      color:#FFF;
      font-size:0.18rem;
      position:absolute;
      top:0;
      left:0;
    }
    #dataStatistics>span>span{
      color:#32C7FE;
    }
    #dataStatistics>span:nth-child(2){
      top:5.5vh;
      left:1.5vw;
    }
    #dataStatistics>span:nth-child(3){
      top:6.4vh;
      left:17vw;
    }
    #dataStatistics>span:nth-child(4){
      top:14.8vh;
      left:0.2vw;
    }
    #dataStatistics>span:nth-child(5){
      top:14.8vh;
      left:17.5vw;
      font-size:0.16rem;
    }
    #dataStatistics>span:nth-child(6){
      top:24vh;
      left:3.6vw;
    }
    #dataStatistics>span:nth-child(7){
      top:23vh;
      left:16.0vw;
    }
</style>